<script setup lang="ts">
const handleDataChange = (e: any) => {
	console.log("e: ", e)
	const { activeIndex } = e.detail.data
	localStorage.setItem("activeIndex", activeIndex)
}
</script>

<template>
	<div>
		<!-- third-part app page home -->
		<!-- <micro-app
			name="childHome"
			url="http://localhost:3000/main/childHome"
			style="min-height: 80vh"
			ssr
			shadowDom
		></micro-app> -->
		<micro-app
			name="childHome"
			url="http://localhost:3000/main/childHome"
			style="min-height: 80vh"
			ssr
			@datachange="handleDataChange"
		></micro-app>
	</div>
</template>

<style scoped>
.logo {
	height: 6em;
	padding: 1.5em;
	will-change: filter;
	transition: filter 300ms;
}

.logo:hover {
	filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
	filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
